<template>
  <div>自定义组件在这里显示</div>
  <div>
    <van-button plain block type="primary" @click="show"
    >hook弹框组件</van-button
    >
    <div>组件加载结果：{{ selectedValue }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from './basic/lbt-datepicker.vue';
import useVanPopup from '@/components/functional/useVanPopup.ts';

const initialModelValue = ref(['Wenzhou']); // 设置初始值
const selectedValue = ref('');

const { show, hide } = useVanPopup({
  component: DatePicker,
  props: {
    position: 'bottom',
    closeable: false,
    closeOnClickOverlay: true,
    closeOnPopstate: true,
    style: { height: '40%', width: '100vw' },
    children: {
      columns: [
        { text: '杭州', value: 'Hangzhou' },
        { text: '宁波', value: 'Ningbo' },
        { text: '温州', value: 'Wenzhou' },
        { text: '绍兴', value: 'Shaoxing' },
        { text: '湖州', value: 'Huzhou' },
        { text: '湖南', value: 'HuNan' },
        { text: '上海', value: 'ShangHai' },
        { text: '海南', value: 'HaiNan' },
      ],
      title:'选择地区',
      showToolbar:true,
      visibleOptionNum:5,
      modelValue: initialModelValue.value, // 传递初始值
    },
  },
  onConfirm: (value) => {
    selectedValue.value = value;
  },
  onCancel: () => {},
});
</script>

<style scoped lang="scss"></style>
